<template>
  <div>
    <div class="tab-bar" :style="[{backgroundColor:backgroundColor},location]">
      <!-- tabbar组件 -->
      <div class="tab-bar-item" v-for="(item,index) in list" :key="index">
        <!-- {{$route.path === item.pagePath}} -->
        <router-link :to="item.pagePath">
          <div class="top-img" v-if="isbottom">
            <img v-if="$route.path === item.pagePath" :src="item.selectedIconPath" alt="tabBar" />
            <img v-else :src="item.iconPath" alt="tabBar" />
          </div>
          <!-- :class="{'active':$route.path === item.pagePath}" -->
          <div
            class="text"
            :style="$route.path === item.pagePath?{color:selectedColor}:{color:color}"
          >{{item.text}}</div>
        </router-link>
      </div>
    </div>
    <!-- 空标签占位置 -->
    <div v-if="!isbottom" :style="location"></div>
  </div>
</template>
<script>
// this.$route  //路由对象  获取当前激活的路由信息
export default {
  name: "tabBar",
  props: {
    list: {
      //tabbar数据
      type: Array,
      default: function() {
        return [];
      }
    },
    backgroundColor: {
      //背景颜色
      type: String,
      default: "#f5f5f5"
    },
    selectedColor: {
      type: String,
      default: "#AB956D"
    },
    color: {
      type: String,
      default: "#989898"
    },
    position: {
      type: String,
      default: "bottom",
      validator: function(value) {
        //自定义验证规则  父传子
        return ["bottom", "top"].indexOf(value) !== -1;
      }
    }
  },
  computed: {
    location() {
      //top:0
      this.isbottom = this.position === "top"?false:true
      return this.position === "top"
        ? { top: 0, height: "1.5rem" }
        : { bottom: 0, height: "2.5rem" };
    }
  },
  data() {
    return {
      isbottom: true,
      // // cuurIndex:0,
      // muenList: [
      //   {
      //     pagePath: "/",
      //     iconPath: require("../../assets/images/tabbar/home.png"),
      //     selectedIconPath: require("../../assets/images/tabbar/home@selected.png"),
      //     text: "主页"
      //   },
      //   {
      //     pagePath: "/category",
      //     iconPath: require("../../assets/images/tabbar/category.png"),
      //     selectedIconPath: require("../../assets/images/tabbar/category@selected.png"),
      //     text: "分类"
      //   },
      //   {
      //     pagePath: "/cart",
      //     iconPath: require("../../assets/images/tabbar/cart.png"),
      //     selectedIconPath: require("../../assets/images/tabbar/cart@selected.png"),
      //     text: "购物车"
      //   },
      //   {
      //     pagePath: "/my",
      //     iconPath: require("../../assets/images/tabbar/my.png"),
      //     selectedIconPath: require("../../assets/images/tabbar/my@selected.png"),
      //     text: "我的"
      //   }
      // ]
    };
  },
  created() {
    console.log(this.$route.path);
  }
};
</script>
<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
  height: 2.5rem;
  // background: $bg;
  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   // margin: 0.2rem 0;
    .top-img {
      width: 1.5rem;
      height: 1.5rem;
      img {
        width: 100%;
      }
    }
    .text {
      margin-top: 0.1rem;
      font-size: 0.6rem;
      color: $fc;
    }
    .active {
      color: $fced;
    }
  }
}
</style>